/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-06 17:10:27
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-06 18:20:17
 */
import React from 'react'
import gg from '../../assets/gg.png'
/* 1-包装器 2-WrappedComponent=>函数的参数 */
function withMouse(WrappedComponent) {
  /* 3-函数内部创建一个类组件 */
  class Mouse extends React.Component {
    state = {
      X: 0,
      Y: 0,
    }
    render() {
      return (
        /* 5-渲染参数组件  6-传递参数 */
        // <WrappedComponent x={this.state.X} y={this.state.Y}></WrappedComponent>
        <WrappedComponent {...this.state}></WrappedComponent>
      )
    }
    componentDidMount() {
      document.addEventListener('mousemove', (e) => {
        // console.log(e, 88)
        this.setState({
          X: e.clientX,
          Y: e.clientY,
        })
      })
    }
  }
  /* 4-返回这个类组件 */
  return Mouse
}
/* 普通组件=>目的：让他功能增强 */
// 7-定义需要增强的组件
const Position = (props) => {
  console.log(props, 999)
  return (
    <h1>
      X:{props.X}===Y:{props.Y}
    </h1>
  )
}
const GG = ({ X, Y }) => {
  // eslint-disable-next-line jsx-a11y/alt-text
  return (
    // eslint-disable-next-line jsx-a11y/alt-text
    <img
      src={gg}
      style={{
        position: 'absolute',
        top: Y - 40 + 'px',
        left: X - 40 + 'px',
        width: '80px',
        height: '80px',
      }}
    />
  )
}
/* 接收增强之后的组件 */
/* 8-将组件增强并接收==》接收的是一个增强之后的组件 */
const PositionCom = withMouse(Position)
const GGCom = withMouse(GG)

class Hoc extends React.Component {
  // 定义一个函数，在函数内部创建一个相应类组件
  render() {
    return (
      <div>
        御剑乘风来,除魔天地间!===Hoc
        <PositionCom></PositionCom>
        <GGCom></GGCom>
      </div>
    )
  }
}
export default Hoc
